<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: 缩放的Line
 * @LastEditTime: 2021-11-12 08:37:50
 * @FilePath: \tianjushi-kanban\src\components\charts\FlowChart1.vue
-->
<template>
  <div :style="[{ width: width, height: height, overflow: 'hidden' }]">
    <div
      ref="echartref"
      :style="[{ width: width, height: height }, _resetChartStyle]"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import {
  onMounted,
  toRefs,
  ref,
  reactive,
  watch,
  computed,
  nextTick,
  version,
} from "vue";
import { resetChartStyle, showLoading, hexToRgba } from "@/core/tools/common";
export default {
  props: {
    title: {
      type: String,
      default: "100%",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    chartdata: {
      type: Array,
      default: [
        {
          name: "A",
          value: 612.5,
        },
        {
          name: "B",
          value: 512.5,
        },
        {
          name: "C",
          value: 412.5,
        },
        {
          name: "D",
          value: 312.5,
        },
        {
          name: "E",
          value: 212.5,
        },
        {
          name: "D",
          value: 312.5,
        },
        {
          name: "E",
          value: 212.5,
        },
        {
          name: "D",
          value: 312.5,
        },
        {
          name: "E",
          value: 212.5,
        },
      ],
    },
    color: {
      default: ["#26C5A2", "#FE9C5A"],
      type: Number,
    },
    fontSize: {
      default: 16,
      type: Number,
    },
    unit: {
      default: "unit",
      type: String,
    },
    max: {
      default: 1000,
      type: Number,
    },
    barWidth: {
      default: 45,
      type: Number,
    },

    grid: {
      default: [0, 100, 0, 100],
      type: Number,
    },
  },
  setup: function (props, context) {
    let chartInstance = null; //折线不能用响应式接收echart
    /*监听props*/
    watch(props, (newProps, oldProps) => {
      f_echartInit(chartInstance);
    });

    let state = reactive({
      echartref: ref(),
      chartInit: "",
    });
    const _resetChartStyle = computed({
      get() {
        return resetChartStyle();
      },
    });

    const f_echartInit = (chartdom) => {
      var data = {
        children: [
          {
            children: [
              {
                ifend: "1",
                name: "节点二1",
                number: ".18",
              },
            ],
            name: "节点一1",
            number: "0",
          },
          {
            ifend: "1",
            name: "节点一2",
            number: ".87",
          },
          {
            ifend: "1",
            name: "节点一3",
            number: ".92",
          },
          {
            ifend: "1",
            name: "节点一4",
            number: "1.68",
          },
          {
            children: [
              {
                code: "2",
                ifend: "1",
                name: "节点二10",
                number: "10.01",
              },
              {
                ifend: "1",
                name: "节点二11",
                number: "0.31",
              },
              {
                code: "2",
                ifend: "1",
                name: "节点二12",
                number: "-.92",
              },
              {
                code: "2",
                name: "节点二2",
                number: "100",
              },
              {
                ifend: "1",
                name: "节点二3",
                number: ".05",
              },
              {
                ifend: "1",
                name: "节点二4",
                number: "1.53",
              },
              {
                ifend: "1",
                name: "节点二5",
                number: "1.14",
              },
              {
                ifend: "1",
                name: "节点二6",
                number: "1.98",
              },
              {
                ifend: "1",
                name: "节点二7",
                number: ".02",
              },
              {
                ifend: "1",
                name: "节点二8",
                number: "1.03",
              },
              {
                ifend: "1",
                name: "节点二9",
                number: "3.05",
              },
            ],
            name: "节点一5",
            number: ".16",
          },
          {
            ifend: "1",
            name: "节点一6",
            number: "2.33",
          },
        ],
        name: "节点222222",
        number: ".46",
      };

      function format(data) {
        data.x = 0;
        data.y = 0;
        if (!data.hasOwnProperty("children")) {
          data.len = [1, -1];
          data.leny = [1, 9];
          return data;
        }
        var l2 = data.children;
        var hi = parseInt(l2.length / 2);
        var xi = l2.length - hi;
        var his = getSum(l2, 0, hi);
        var xis = getSum(l2, xi - 1, l2.length);
        l2 = sortData(l2, hi, xi);
        data.children = l2;
        var jhi = hi > 9 || his === 0 ? 300 : 200;
        var jxi = xi > 9 || xis === 0 ? 300 : 200;
        var maxmin = [-100000, 100000];
        var maxminy = [-100000, 100000];
        for (var i = 0; i < l2.length; i++) {
          if (i < hi) {
            l2[i].x = getLoction(hi, data.x, i + 1);
            l2[i].y = data.y + jhi;
            l2[i].fx = getFX(hi, i, false);
          } else {
            l2[i].x = getLoction(xi, data.x, i - hi + 1);
            l2[i].y = data.y - jxi;
            l2[i].fx = getFX(xi, i - hi, true);
          }
          getMaxMin(maxmin, l2[i].x);
          getMaxMin(maxminy, l2[i].y);
          if (!l2[i].hasOwnProperty("children")) {
            continue;
          }
          var l3 = l2[i].children;
          for (var j = 0; j < l3.length; j++) {
            if (i < hi) {
              l3[j].x = getLoction(l3.length, l2[i].x, j + 1);
              l3[j].y = l2[i].y + 200;
              l3[j].fx = getFX(l3.length, j, false);
            } else {
              l3[j].x = getLoction(l3.length, l2[i].x, j + 1);
              l3[j].y = l2[i].y - 200;
              l3[j].fx = getFX(l3.length, j, true);
            }
            getMaxMin(maxmin, l3[j].x);
            getMaxMin(maxminy, l3[j].y);
          }
        }
        var c;
        if (hi % 2 === 0) {
          c = hi / 2;
          if (l2[c].hasOwnProperty("children")) {
            if (
              l2[c - 1].hasOwnProperty("children") &&
              l2[c].children[0].x < l2[c].x - 50
            ) {
              var tem = 50 - l2[c].children[0].x;
              for (var j = 0; j < l2[c].children.length; j++) {
                l2[c].children[j].x = l2[c].children[j].x + tem;
                getMaxMin(maxmin, l2[c].children[j].x);
              }
              l2[c].x = getLoction2(l2[c].children);
            }
          }
        } else {
          c = parseInt(hi / 2);
        }
        for (var i = c + 1; i < hi; i++) {
          if (l2[i].hasOwnProperty("children")) {
            if (
              l2[i - 1].hasOwnProperty("children") &&
              l2[i - 1].children[l2[i - 1].children.length - 1].x -
                l2[i].children[0].x >
                -100
            ) {
              var tem =
                l2[i - 1].children[l2[i - 1].children.length - 1].x +
                100 -
                l2[i].children[0].x;
              for (var j = 0; j < l2[i].children.length; j++) {
                l2[i].children[j].x = l2[i].children[j].x + tem;
                getMaxMin(maxmin, l2[i].children[j].x);
              }
              l2[i].x = getLoction2(l2[i].children);
            }
          }
        }
        for (var i = c - 1; i >= 0; i--) {
          if (l2[i].hasOwnProperty("children")) {
            if (
              l2[i + 1].hasOwnProperty("children") &&
              l2[i + 1].children[0].x -
                l2[i].children[l2[i].children.length - 1].x <
                100
            ) {
              var tem =
                l2[i].children[l2[i].children.length - 1].x -
                (l2[i + 1].children[0].x - 100);
              for (var j = 0; j < l2[i].children.length; j++) {
                l2[i].children[j].x = l2[i].children[j].x - tem;
                getMaxMin(maxmin, l2[i].children[j].x);
              }
              l2[i].x = getLoction2(l2[i].children);
            }
          }
        }

        if (xi % 2 === 0) {
          c = xi / 2 + hi;
          if (l2[c].hasOwnProperty("children")) {
            if (
              l2[c - 1].hasOwnProperty("children") &&
              l2[c].children[0].x < l2[c].x - 50
            ) {
              var tem = 50 - l2[c].children[0].x;
              for (var j = 0; j < l2[c].children.length; j++) {
                l2[c].children[j].x = l2[c].children[j].x + tem;
                getMaxMin(maxmin, l2[c].children[j].x);
              }
              l2[c].x = getLoction2(l2[c].children);
            }
          }
        } else {
          c = parseInt(xi / 2) + hi;
        }
        for (var i = c + 1; i < l2.length; i++) {
          if (l2[i].hasOwnProperty("children")) {
            if (
              l2[i - 1].hasOwnProperty("children") &&
              l2[i - 1].children[l2[i - 1].children.length - 1].x -
                l2[i].children[0].x >
                -100
            ) {
              var tem =
                l2[i - 1].children[l2[i - 1].children.length - 1].x +
                100 -
                l2[i].children[0].x;
              for (var j = 0; j < l2[i].children.length; j++) {
                l2[i].children[j].x = l2[i].children[j].x + tem;
                getMaxMin(maxmin, l2[i].children[j].x);
              }
              l2[i].x = getLoction2(l2[i].children);
            }
          }
        }
        for (var i = c - 1; i >= hi; i--) {
          if (l2[i].hasOwnProperty("children")) {
            if (
              l2[i + 1].hasOwnProperty("children") &&
              l2[i + 1].children[0].x -
                l2[i].children[l2[i].children.length - 1].x <
                100
            ) {
              var tem =
                l2[i].children[l2[i].children.length - 1].x -
                (l2[i + 1].children[0].x - 100);
              for (var j = 0; j < l2[i].children.length; j++) {
                l2[i].children[j].x = l2[i].children[j].x - tem;
                getMaxMin(maxmin, l2[i].children[j].x);
              }
              l2[i].x = getLoction2(l2[i].children);
            }
          }
        }
        // data.x = (maxmin[0] - maxmin[1]) / 2 + maxmin[1];
        if (maxmin[0] - maxmin[1] <= 400) {
          maxmin[0] = maxmin[0] + 100;
          maxmin[1] = maxmin[1] - 100;
        }
        data.len = maxmin;
        data.leny = maxminy;
        return data;
      }

      function format2(data) {
        if (!data.hasOwnProperty("children")) {
          return data;
        }
        var l2 = data.children;
        var hi = parseInt(l2.length / 2);
        var xi = l2.length - hi;
        var maxmin = data.len;
        for (var i = 0; i < l2.length; i++) {
          if (!l2[i].hasOwnProperty("children")) {
            if (
              i > 0 &&
              i != hi &&
              l2[i - 1].hasOwnProperty("children") &&
              l2[i - 1].children.length > 5
            ) {
              var tem = (l2[i - 1].children.length - 5) / 2;
              l2[i].x = l2[i].x + 100 * tem;
              var len,
                flag = false;
              if (i < hi) {
                len = hi;
              } else {
                len = l2.length;
              }
              for (var j = i + 1; j < len; j++) {
                flag = true;
                l2[j].x = l2[j].x + 100 * tem;
                if (l2[j].hasOwnProperty("children")) {
                  var children = l2[j].children;
                  for (var k = 0; k < children.length; k++) {
                    children[k].x = children[k].x + 100 * tem;
                    getMaxMin(maxmin, children[k].x);
                  }
                }
                getMaxMin(maxmin, l2[j].x);
              }
              if (flag) {
                l2[i].x = l2[i].x > maxmin[0] ? maxmin[0] : l2[i].x;
              }
            } else if (
              i < l2.length - 1 &&
              l2[i + 1].hasOwnProperty("children") &&
              l2[i + 1].children.length > 5
            ) {
              var tem = (l2[i + 1].children.length - 5) / 2;
              l2[i].x = l2[i].x - 100 * tem;
              var len,
                flag = false;
              if (i < hi) {
                len = 0;
              } else {
                len = hi;
              }
              for (var j = i - 1; j >= len; j--) {
                flag = true;
                l2[j].x = l2[j].x - 100 * tem;
                if (l2[j].hasOwnProperty("children")) {
                  var children = l2[j].children;
                  for (var k = 0; k < children.length; k++) {
                    children[k].x = children[k].x - 100 * tem;
                    getMaxMin(maxmin, children[k].x);
                  }
                }
                getMaxMin(maxmin, l2[j].x);
              }
              if (flag) {
                l2[i].x = l2[i].x < maxmin[1] ? maxmin[1] : l2[i].x;
              }
            }
          }
        }
        // data.x = (maxmin[0] - maxmin[1]) / 2 + maxmin[1];
        if (maxmin[0] - maxmin[1] <= 400) {
          maxmin[0] = maxmin[0] + 100;
          maxmin[1] = maxmin[1] - 100;
        }
        data.len = maxmin;
        return data;
      }

      function getLoction(num, x, index) {
        if (num % 2 === 0) {
          var c = num / 2 - index;
          x = x - 50 - 100 * c;
        } else {
          var c = parseInt(num / 2 + 1) - index;
          x = x - 100 * c;
        }
        return x;
      }

      /*function getLoction2(data) {
	var len = data.length;
	var x;
	if (len % 2 === 0) {
		var c = len / 2;
		x = data[c - 1].x + 50;
	} else {
		var c = parseInt(len / 2 + 1);
		x = data[c - 1].x;
	}
	return x;
}*/

      function getFX(len, index, fx) {
        var x, c;
        if (len < 1) {
          return 1;
        }
        c = len % 2 === 0 ? len / 2 : parseInt(len / 2) + 1;
        x = index < c ? 1 : -1;
        if (fx) {
          x = -x;
        }
        return x;
      }

      function getSum(data, st, ed) {
        if (ed > data.length) {
          ed = data.length;
        }
        var count = 0;
        for (var i = st; i < ed; i++) {
          if (!data[i].hasOwnProperty("children")) {
            continue;
          }
          var l3 = data[i].children;
          count = count + l3.length;
        }
        return count;
      }

      function sortData(data, hi, xi) {
        var res = [];
        var len = hi - 1;
        var pos = 0;
        for (var i = 0; i < hi - 1; i++) {
          var flag = 1;
          for (var j = 0; j < len; j++) {
            var dx = !data[j].hasOwnProperty("children")
                ? 0
                : data[j].children.length,
              dx1 = !data[j + 1].hasOwnProperty("children")
                ? 0
                : data[j + 1].children.length;
            if (dx > dx1) {
              var tem = data[j];
              data[j] = data[j + 1];
              data[j + 1] = tem;
              flag = 0;
              pos = j;
            }
          }
          len = pos;
          if (flag === 1) {
            break;
          }
        }
        for (var i = 0; i < hi; i++) {
          if (i % 2 === 0) {
            res[i / 2] = data[i];
          } else {
            res[hi - (i + 1) / 2] = data[i];
          }
        }

        len = data.length - 1;
        pos = 0;
        for (var i = hi; i < data.length - 1; i++) {
          var flag = 1;
          for (var j = hi; j < len; j++) {
            var dx = !data[j].hasOwnProperty("children")
                ? 0
                : data[j].children.length,
              dx1 = !data[j + 1].hasOwnProperty("children")
                ? 0
                : data[j + 1].children.length;
            if (dx > dx1) {
              var tem = data[j];
              data[j] = data[j + 1];
              data[j + 1] = tem;
              flag = 0;
              pos = j;
            }
          }
          len = pos;
          if (flag === 1) {
            break;
          }
        }
        for (var i = 0; i < xi; i++) {
          if (i % 2 === 0) {
            res[i / 2 + hi] = data[i + hi];
          } else {
            res[xi - (i + 1) / 2 + hi] = data[i + hi];
          }
        }
        return res;
      }

      function getMaxMin(maxmin, x) {
        if (maxmin[0] < x) {
          maxmin[0] = x;
        }
        if (maxmin[1] > x) {
          maxmin[1] = x;
        }
        return maxmin;
      }

      function initCharts(returninfo) {
        var res = {};
        var links = [];
        var lines = [];
        var yiji =
          "image://";
        var erji = yiji;
        var sanji = erji;
        returninfo.number =
          returninfo.number === undefined ? "--" : returninfo.number + "%";
        returninfo.number = returninfo.number.startsWith(".")
          ? "0" + returninfo.number
          : returninfo.number;
        returninfo.number = returninfo.number.startsWith("-.")
          ? returninfo.number.replace("-.", "-0.")
          : returninfo.number;
        var url = "${pageContext.request.requestURL}".replace(
          "${pageContext.request.requestURI}",
          ""
        );
        var data = [
          {
            name: returninfo.name + "：" + returninfo.number,
            tooltip: {
              formatter: "{b}",
            },
            symbol: yiji,
            symbolSize: [60, 40],
            value: [returninfo.x, returninfo.y],
            datadate: returninfo.datadate,
            spid: returninfo.id,
          },
        ];
        if ("children" in returninfo) {
          var l2 = returninfo.children;
          var curveness, colork, colorn, xs;
          for (var i = 0; i < l2.length; i++) {
            curveness = l2[i].fx === 1 ? 0.1 : -0.1;
            l2[i].number =
              l2[i].number === undefined ? "--" : l2[i].number + "%";
            l2[i].number = l2[i].number.startsWith(".")
              ? "0" + l2[i].number
              : l2[i].number;
            l2[i].number = l2[i].number.startsWith("-.")
              ? l2[i].number.replace("-.", "-0.")
              : l2[i].number;
            colork =
              l2[i].code === "2" || l2[i].code === 2 ? "#C75050" : "#53B5EA";
            var link = {
              source: returninfo.name + "：" + returninfo.number,
              target: l2[i].name + "：\n" + l2[i].number,
              lineStyle: {
                curveness: curveness,
                color: colork,
              },
            };
            links.push(link);
            colorn =
              l2[i].code === "2" || l2[i].code === 2
                ? "rgba(199,80,80,0.5)"
                : "rgba(55,155,255,0.5)";
            var line = {
              coords: [
                [returninfo.x, returninfo.y],
                [l2[i].x, l2[i].y],
              ],
              lineStyle: {
                curveness: curveness,
                color: colorn,
              },
            };
            lines.push(line);
            var node = {
              name: l2[i].name + "：\n" + l2[i].number,
              tooltip: {
                formatter: "{b}",
              },
              symbol: erji,
              symbolSize: [60, 40],
              value: [l2[i].x, l2[i].y],
              datadate: l2[i].datadate,
              ifend: l2[i].ifend,
              spid: l2[i].id,
            };
            data.push(node);
            if ("children" in l2[i]) {
              var l3 = l2[i].children;
              for (var j = 0; j < l3.length; j++) {
                curveness = l3[j].fx === 1 ? 0.1 : -0.1;
                l3[j].number =
                  l3[j].number === undefined ? "--" : l3[j].number + "%";
                l3[j].number = l3[j].number.startsWith(".")
                  ? "0" + l3[j].number
                  : l3[j].number;
                l3[j].number = l3[j].number.startsWith("-.")
                  ? l3[j].number.replace("-.", "-0.")
                  : l3[j].number;
                colork =
                  l3[j].code === "2" || l3[j].code === 2
                    ? "#C75050"
                    : "#53B5EA";
                var link = {
                  source: l2[i].name + "：\n" + l2[i].number,
                  target: l3[j].name + "：\n" + l3[j].number,
                  lineStyle: {
                    curveness: curveness,
                    color: colork,
                  },
                };
                links.push(link);
                colorn =
                  l3[j].code === "2" || l3[j].code === 2
                    ? "rgba(199,80,80,0.5)"
                    : "rgba(55,155,255,0.5)";
                var line = {
                  coords: [
                    [l2[i].x, l2[i].y],
                    [l3[j].x, l3[j].y],
                  ],
                  lineStyle: {
                    curveness: curveness,
                    color: colorn,
                  },
                };
                lines.push(line);
                node = {
                  name: l3[j].name + "：\n" + l3[j].number,
                  tooltip: {
                    formatter: "{b}",
                  },
                  symbol: sanji,
                  symbolSize: [60, 40],
                  value: [l3[j].x, l3[j].y],
                  datadate: l3[j].datadate,
                  ifend: l3[j].ifend,
                  spid: l3[j].id,
                };
                data.push(node);
              }
            }
          }
        }
        res.data = data;
        res.links = links;
        res.lines = lines;
        res.len = returninfo.len;
        res.leny = returninfo.leny;
        return res;
      }
      var jsons = format(data);
      jsons = format2(jsons);
      var returninfo = initCharts(jsons);
      const option = {
        grid: {
          left: "5%",
          right: "5%",
        },
        xAxis: {
          show: false,
          type: "value",
          max: returninfo.len[0],
          min: returninfo.len[1],
        },
        yAxis: {
          show: false,
          type: "value",
          max: returninfo.leny[0],
          min: returninfo.leny[1] - 10,
        },
        tooltip: {},
        series: [
          {
            type: "graph",
            zlevel: 5,
            draggable: false,
            coordinateSystem: "cartesian2d", //使用二维的直角坐标系（也称笛卡尔坐标系）
            label: {
              show: true,
              color: "#000",
              position: "bottom",
            },
            data: returninfo.data,
            links: returninfo.links,
            lineStyle: {
              opacity: 1,
              width: 2,
            },
          },
          {
            type: "lines",
            coordinateSystem: "cartesian2d",
            zlevel: 1,
            animation: false,
            effect: {
              show: true,
              period: 5,
              trailLength: 0.01,
              symbolSize: 12,
              symbol: "pin",
              loop: true,
            },
            data: returninfo.lines,
            lineStyle: {
              width: 0,
            },
          },
          {
            type: "lines",
            coordinateSystem: "cartesian2d",
            zlevel: 1,
            animation: false,
            effect: {
              show: true,
              period: 6,
              trailLength: 0.01,
              symbolSize: 12,
              symbol: "pin",
              loop: true,
            },
            data: returninfo.lines,
            lineStyle: {
              width: 0,
            },
          },
          {
            type: "lines",
            coordinateSystem: "cartesian2d",
            zlevel: 1,
            animation: false,
            effect: {
              show: true,
              period: 8,
              trailLength: 0.01,
              symbolSize: 12,
              symbol: "pin",
              loop: true,
            },
            data: returninfo.lines,
            lineStyle: {
              width: 0,
            },
          },
        ],
      };

      /*myChart.on('click', function(params) {
            if (params.dataType === 'node') {
                var data = params.data;
                if (data.ifend === '1' || data.ifend === 1) {
                    var sp_id = data.spid;
                    var data_date = data.datadate;
                    var url = getUrlByParams("/branchLineLoss/getMeterJson?sp_id=" +
                        sp_id + "&data_date=" + data_date, null);
                    createRespone('楼层结构', url, null, null, '650px', '600px');
                }
            }
        }*/

      chartdom.setOption(option);
      chartdom.hideLoading();
    };
    //挂载
    onMounted(() => {
      chartInstance = echarts.init(state.echartref);
      chartInstance.showLoading(showLoading());
      f_echartInit(chartInstance);
    });
    return {
      ...toRefs(state),
      _resetChartStyle,
    };
  },
};
</script>

<style>
</style>